如何从零创建一个vuepress2.x项目

大家好我是图恩，这个周末体验了一下vuepress这个ssg静态内容生成框架，按照官网的教程从创建到运行步骤比较简单，但是官网的例子总感觉有些东西说的很模糊，代码并不能直接使用，以下为图恩整理并实际能运行的一些步骤供参考。

步骤 1: 创建并进入一个新目录

mkdir vuepress-starter\ncd vuepress-starter

步骤 2: 初始化项目

git init\nnpm init

步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

步骤 4: 在 package.json 中添加一些 scripts

{\n  "scripts": {\n    "docs:dev": "vuepress dev docs",\n    "docs:build": "vuepress build docs"\n  }\n}

步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore\necho '.temp' >> .gitignore\necho '.cache' >> .gitignore

步骤 6: 创建你的第一篇文档

mkdir docs\necho '# Hello VuePress' > docs/README.md

步骤 7: 在本地启动服务器来开发你的文档网站

npm run docs:dev

步骤 8.创建config.js，通过configjs设置站点标题跟导航菜单

import { defineUserConfig } from 'vuepress'\nimport { defaultTheme } from 'vuepress'\n\nexport default defineUserConfig({\n  lang: 'zh-CN',\n  title: 'www.dsiab.com',\n  description: 'javascript技术分享',\n  base: './',\n  head: [\n    ["link",{rel: "stylesheet",href:"/css/index.css"}]\n  ],\n  theme: defaultTheme({\n    // 默认主题配置\n    navbar: [\n      {\n        text: '首页',\n        link: '/',\n      },\n    ],\n    sidebar: [\n      {\n        text: 'birthday',\n        link: '/post/birthday',\n      },\n    ]\n  }),\n})

目录如下